<!DOCTYPE html>
<html>
<head>
    <#import "../common/common.macro.ftl" as netCommon>
    <title>${title!"艺术上海"}</title>
    <meta charset="utf-8" />
    <meta name="keywords" content="${keywords?if_exists}" />
    <meta name="description" content="${description?if_exists}" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link href="/static/css/bootstrap.mini.css" rel="stylesheet" />
    <link href="/static/css/style.css" rel="stylesheet" />
    <link href="/static/css/common/index.css" rel="stylesheet" />

    <link href="/static/css/footer/index.css" rel="stylesheet" />
    <link href="/static/css/font/font-awesome.min.css" rel="stylesheet" />
    <link href="/static/css/font/font-awesome.min.css" rel="stylesheet" />
    <link href="/static/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <style>
        .container-p{
            width: 1200px;
        }
        .padding-y{
            margin: 20px;
        }
        .form-group label{
            margin: 10px 0px;
        }

        .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
            padding: 0.75rem;
            vertical-align: middle;
            border-top: 1px solid #dee2e6;
        }

        .table{
            width: 100%;
        }

        .itemside{
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }
        .card-body{
            width: 100%;
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
        }
        .card-body .col{
            width: 48%;
            margin-bottom: 20px;
        }
        .track_list li{
            list-style: disc;
            line-height: 24px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<!-- header -->
<@netCommon.commonHeader "works" menu i18n/>

<section class="section-pagetop bg">
    <div class="container">
        <h2 class="title-page">我的订单</h2>
    </div> <!-- container //  -->
</section>

<section class="section-content padding-y ">
    <div class="container">

        <!-- =========================  COMPONENT MYORDER 1 ========================= -->
        <div class="row">
            <aside class="col-md-3">
                <!--   SIDEBAR   -->
                <ul class="list-group">
                    <a class="list-group-item active" href="/user/order"> 我的订单 </a>
                    <a class="list-group-item " href="/user/setting"> 个人设置 </a>
                    <a class="list-group-item " href="/user/address"> 我的收货地址 </a>
                </ul>


            </aside>
            <main class="col-md-9">

                        <h5 style="margin-bottom:20px;">订单信息: </h5>
                        <table class="table table-borderless table-shopping-cart">
                            <thead class="text-muted">
                            <tr class="text-uppercase">
                                <th scope="col">产品</th>
                                <th scope="col" width="220">数量</th>
                                <th scope="col" width="220">价格</th>
                            </tr>
                            </thead>
                            <tbody id="productList">


                            </tbody>
                        </table>

                        <h5 style="margin-bottom:20px; padding-top: 20px; border-top: 1px #eee solid">订单详情: </h5>
                        <div id="order-info">

                        </div>

<#--                        <div class="tracking-wrap">-->
<#--                            <div class="step active">-->
<#--                                <span class="icon"> <i class="fa fa-check"></i> </span>-->
<#--                                <span class="text">支付成功</span>-->
<#--                            </div> <!-- step.// &ndash;&gt;-->
<#--                            <div class="step active">-->
<#--                                <span class="icon"> <i class="fa fa-user"></i> </span>-->
<#--                                <span class="text">商品发货</span>-->
<#--                            </div> <!-- step.// &ndash;&gt;-->
<#--                            <div class="step">-->
<#--                                <span class="icon"> <i class="fa fa-truck"></i> </span>-->
<#--                                <span class="text"> 运输中 </span>-->
<#--                            </div> <!-- step.// &ndash;&gt;-->
<#--                            <div class="step">-->
<#--                                <span class="icon"> <i class="fa fa-box"></i> </span>-->
<#--                                <span class="text"> 确认收货</span>-->
<#--                            </div> <!-- step.// &ndash;&gt;-->
<#--                        </div>-->


                        <hr>
                        <h5 style="margin-bottom:20px; padding-top: 20px;">物流信息:</h5>
                        <dv id="tp_track_list_content">


                        </dv>



            </main>
        </div> <!-- row.// -->
    </div>
</section>
<!-- footer -->


<!-- script -->
<@netCommon.commonScript />

<script src="/static/js/handlebars.js"></script>

<script id="tp_order_product" type="text/x-handlebars-template">
    {{#each items}}
    <tr>
    <td style="padding: 10px 0px">
        <figure class="itemside">
            <div class="aside"><img src="{{thumbnail}}"   style="width:140px; height: 140px; object-fit: cover; margin-right: 10px"></div>
            <figcaption class="info">
            <a href="#" class="title text-dark">{{name}}<br/></a>
            </figcaption>
        </figure>
    </td>
    <td style="padding: 10px 0px">
        {{quantity}}件
    </td>
    <td style="padding: 10px 0px">
    <div class="price-wrap">
        ¥{{price}}<br/>
        {{#if framePrice}}
         ¥{{framePrice}}元 裱框费
        {{/if}}
    </div> <!-- price-wrap .// -->
    </td>


        </tr>
    {{/each}}
</script>

<script id="tp_order_info" type="text/x-handlebars-template">


    <article class="card">
        {{#each shippings}}
        <div class="card-body no-gutters">
            <div class="col">
                <strong>发货时间</strong> <br>{{sendDate}}
            </div>
            <div class="col">
                <strong>运输公司:</strong> <br> {{deliveryCorpName}}
            </div>

            <div class="col">
                <strong>物流编号 #:</strong> <br> {{trackingNo}}
            </div>
        </div>
        <div class="card-body no-gutters">
            <div class="col">
                <strong>收件人</strong> <br>{{consigneeName}}
            </div>
            <div class="col">
                <strong>电话:</strong> <br> {{consigneePhone}}
            </div>

            <div class="col">
                <strong>地址:</strong> <br> {{consigneeAddr}}
            </div>
        </div>
        {{/each}}
    </article>
</script>

<script id="tp_track_list" type="text/x-handlebars-template">
    <ul class="track_list">
         {{#each this}}
            <li><strong>{{context}}</strong><p>{{time}}</p></li>
         {{/each}}
    </ul>
    </script>

<script>
    var sn ;//收货地址
    var orderData
    $(function () {
        sn =  getQueryVariable('sn')
        if(sn!==false){
            getOrderList();
        }
    })


    function getdata(com,id) {

            //var url = 'http://api.ickd.cn/?id=201515&secret=842c79e77667ebecce593c0ad491be57&com='+com+'&nu='+id+'&type=json&encode=utf8&ord=desc'
            var url = 'http://api.ickd.cn/?id=201515&secret=842c79e77667ebecce593c0ad491be57&com='+com+'&nu=YT5242870356656&type=json&encode=utf8&ord=desc'

        $.ajax({
                type: "get",
                url: url,
                contentType: "application/json; charset=utf-8",
                dataType: "json",

                success: function (res) {
                    debugger;
                    if(res.errCode=='0' && res.data){


                        var tpl = $("#tp_track_list").html();
                        debugger;
                        var template = Handlebars.compile(tpl);
                        var html = template(res.data);
                        $('#tp_track_list_content').html(html);
                    }else {
                        alert('没有获取到物流信息')
                    }
                },
                error: function (res) {

                }
            });
    }

    function getOrderList() {


        $.ajax({
            type: "get",
            url: baseUrl+"api/shop-center/app/mall/order/get?sn="+sn,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            headers: {
                'lbv': '1.0',
                'tenant' : 'PTC',
                'token':  getToken(),
            },

            success: function (res) {
                if(res && res.code && res.code=='0' ){
                    if(res.data) {
                        debugger;
                        orderData = res.data;


                        var tpl = $("#tp_order_info").html();
                        debugger;
                        var template = Handlebars.compile(tpl);
                        var html = template(orderData);
                        $('#order-info').html(html);




                        var tpl2 = $("#tp_order_product").html();
                        debugger;
                        var template2 = Handlebars.compile(tpl2);
                        var html2 = template2(orderData);
                        $('#productList').html(html2);

                        getdata(orderData.shippings[0].deliveryCorpCode,orderData.shippings[0].trackingNo)

                    }
                    



                }
                else{
                        alert(res.msg);
                        if(res.code=='-3'){
                            relogin(window.location.href);
                        }
                        
                    }
            },
            error: function (res) {

            }
        });
    }

</script>



</body>
</html>
